/** * @Author: Joker * @Date: 2017/12/7 */
<template>
  <div>
    <el-dialog :close-on-click-modal="false" title="新建项目" :visible.sync="modal" width="600px" :before-close="handleClose">
      <div>
        <el-form :model="projectForm" :rules="rules" ref="projectForm" size="small" label-width="80px">
          <el-form-item label="项目名称" prop="name">
            <el-input v-model.trim="projectForm.name"></el-input>
          </el-form-item>
          <el-form-item label="合同编号" prop="number">
            <el-input v-model="projectForm.number"></el-input>
          </el-form-item>
          <el-form-item label="所属部门" prop="blongUnit">
            <el-cascader v-model="projectForm.blongUnit" change-on-select :show-all-levels="false" :options="treeData" :props="{value: 'deptId',label: 'deptName'}"
              placeholder="请选择" style="width: 100%">
            </el-cascader>
          </el-form-item>
          <el-form-item label="施工单位" prop="workUnit">
            <el-cascader v-model="projectForm.workUnit" change-on-select :show-all-levels="false" :options="realTreeData" :props="{value: 'deptId',label: 'deptName'}"
              placeholder="请选择" style="width: 100%">
            </el-cascader>
          </el-form-item>
          <el-form-item label="监理单位" prop="watchUnit">
            <el-cascader v-model="projectForm.watchUnit" change-on-select :show-all-levels="false" :options="realTreeData" :props="{value: 'deptId',label: 'deptName'}"
              placeholder="请选择" style="width: 100%">
            </el-cascader>
          </el-form-item>
          <el-form-item label="检测单位" prop="testUnit">
            <el-cascader v-model="projectForm.testUnit" change-on-select :show-all-levels="false" :options="realTreeData" :props="{value: 'deptId',label: 'deptName'}"
              placeholder="请选择" style="width: 100%">
            </el-cascader>
          </el-form-item>
          <el-form-item label="施工区域" prop="area">
            <el-input v-model.trim="projectForm.area"></el-input>
          </el-form-item>
          <el-form-item label="项目时间" prop="time">
            <el-date-picker v-model="projectForm.time" :picker-options="pickerOptions" :options="treeData" type="datetime" start-placeholder="开始时间"
              style="width: 100%">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker v-model="projectForm.endTime" :picker-options="pickerOptions" :options="treeData" type="datetime" start-placeholder="结束时间"
              style="width: 100%">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit('submit')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    formCheck,
    trim
  } from '../../../lib/utils';
  import {
    projectManagement
  } from "../../../service/service_zbw";
  export default {
    props: {
      addModal: {
        type: Boolean
      },
      treeData: {
        type: Array
      },
      realTreeData: {
        type: Array
      }
    },
    data() {
      const checkTime = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请选择项目开始时间'));
        } else {
          if (this.projectForm.endTime !== '' && this.projectForm.endTime <= value) {
            return callback(new Error('项目开始时间必须在项目结束时间之前'));
          }
          callback();
        }
      };
      const checkEndTime = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请选择项目结束时间'));
        } else {
          if (this.projectForm.time !== '' && this.projectForm.time >= value) {
            return callback(new Error('项目结束时间必须在项目开始时间之后'));
          }
          callback();
        }
      };
      return {
        modal: this.addModal,
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < (Date.now() - 3600 * 1000 * 24);
          },
        },
        projectForm: {
          name: '',
          number: '',
          blongUnit: [],
          workUnit: [],
          watchUnit: [],
          testUnit: [],
          area: '',
          time: '',
          endTime: ''
        },
        rules: {
          name: [{
              required: true,
              message: '请输入项目名称',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 10,
              message: '长度不能超过10个字符',
              trigger: 'blur'
            }
          ],
          number: [{
              required: true,
              message: '请输入合同编号',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 50,
              message: '长度不能超过50个字符',
              trigger: 'blur'
            }
          ],
          area: [{
              required: true,
              message: '请输入施工区域',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 50,
              message: '长度不能超过50个字符',
              trigger: 'blur'
            }
          ],
          blongUnit: [{
            type: 'array',
            required: true,
            message: '请选择所属部门',
            trigger: 'change'
          }],
          workUnit: [{
            type: 'array',
            required: true,
            message: '请选择施工单位',
            trigger: 'change'
          }],
          watchUnit: [{
            type: 'array',
            required: true,
            message: '请选择监理单位',
            trigger: 'change'
          }],
          testUnit: [{
            type: 'array',
            required: true,
            message: '请选择检测单位',
            trigger: 'change'
          }],
          time: [{
            type: 'date',
            required: true,
            validator: checkTime,
            trigger: 'change'
          }],
          endTime: [{
            type: 'date',
            required: true,
            validator: checkEndTime,
            trigger: 'change'
          }],
        },
      };
    },
    methods: {
      /**
       * 提交信息
       */
      async submit(val) {
        let flag = formCheck(this, 'projectForm');
        if (flag) {
          let param = {
            area: this.projectForm.area,
            constructDeptId: this.projectForm.workUnit[this.projectForm.workUnit.length - 1],
            contractNumber: this.projectForm.number,
            contractDate: this.projectForm.time,
            contractEnd: this.projectForm.endTime,
            deptId: this.projectForm.blongUnit[this.projectForm.blongUnit.length - 1],
            detectionDeptId: this.projectForm.testUnit[this.projectForm.testUnit.length - 1],
            name: this.projectForm.name,
            supervisorDeptId: this.projectForm.watchUnit[this.projectForm.watchUnit.length - 1]
          };
          let res = await projectManagement.add(param);
          if (res.success) {
            this.$emit('addFinish', res.obj);
            this.handleClose();
            this.$message({
              message: res.msg,
              type: 'success'
            });
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            });
          }
        }
      },
      /**
       * 关闭模态框
       */
      handleClose() {
        this.modal = false;
        this.$emit('closeModal', this.modal);
        this.handleReset('projectForm');
      },
      /**
       * 清空表单
       */
      handleReset(name) {
        this.$refs[name].resetFields();
      }
    },
    watch: {
      addModal(newval) {
        if (newval) {
          this.modal = newval;
        }
      }
    }
  }

</script>
<style scoped>


</style>

